// 移动动画
.list-complete-item {
  transition: all 1s;
}
.list-complete-enter-from,
.list-complete-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.list-complete-leave-active {
  position: absolute;
}

// 下-->上旋转动画
.flip-horizontal-top {
  animation: flip-horizontal-top 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955)
    both;
}

@keyframes flip-horizontal-top {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(180deg);
  }
}

// 上-->下旋转动画
.flip-horizontal-bottom {
  animation: flip-horizontal-bottom 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955)
    both;
}

@keyframes flip-horizontal-bottom {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0);
  }
}
//loading 动画
@keyframes loader {
  0% {
    width: 0px;
  }
  70% {
    width: 100%;
    opacity: 1;
  }
  90% {
    opacity: 0;
    width: 100%;
  }
  100% {
    opacity: 0;
    width: 0;
  }
}

// 左-右打开
.scale-in-hor-left {
  animation: scale-in-hor-left 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes scale-in-hor-left {
  0% {
    transform: translateX(-50px);
  }
  100% {
    transform: translateX(0);
  }
}

// 右-左收缩
.scale-in-hor-right {
  animation: scale-in-hor-right 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

@keyframes scale-in-hor-right {
  0% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(-200px);
  }
}
